<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-if="seen" :class="{active:isActive}">obj:{{obj}}</p>
        <p :style="{color:color,fontSize:'30px'}">{{message.split("").reverse().join("")}}</p>
        <p>{{[1,2,3].map(item => item*10)}}</p>
        <p>computed:{{reverseMessage}}</p>
        <p>methods:{{reverseMethod()}}</p>
        <ul>
            <template v-if="seen">
                <li>1</li>
                <li>2</li>
            </template>
            <template v-else>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </template>
        </ul>
        <ul>
            <li v-for="(stu,i) in ary" :key="stu.name">
                {{i}} - {{stu.name}}
            </li>
        </ul>
        <ul>
            <li v-for="(value,name) in obj">{{name}} : {{value}}</li>
        </ul>
        <ul>
            <li v-for="i in 10">{{i}}</li>
        </ul>
        <button type="button" @click="handleClick">change</button>
        <button type="button" @click="handleClick(1000)">OK</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            mounted(){
                console.log("this",this);
            },
            data:{
                seen:false,
                message:"hello",
                isActive:false,
                color:"blue",
                obj:{
                    a:100
                },
                ary:[
                    {name:"张飞"},
                    {name:"关羽"},
                    {name:"刘备"}
                ]
            },
            computed:{
                reverseMessage:{
                    get(){
                        console.log("computed")
                        return this.message.split("").reverse().join("");
                    },
                    set(msg){
                        this.message = msg;
                    }
                }
            },
            methods:{
                reverseMethod(){
                    console.log("methods")
                    return this.message.split("").reverse().join("");
                },
                handleClick(param){
                    // this.message = "message is change";
                    // this.obj.a = 200;
                    console.log("param:",param);
                    this.reverseMessage = "reverse";
                }
            }
        });

    </script>
</body>
</html>